<template>
  <div v-if="!optimal && hasVipDiscount && !$isStore()">
    <div v-if="!isNew && styleType == 1">
      <div @click="goVipBuy(vip1.cmpId, cfrom.vip)" :style="'background:linear-gradient(90deg,rgba(247,223,176,1) 0%, rgba(247,223,176,0.7) 100%);'" class="c-hh60 c-ph24 c-flex-row c-justify-sb c-aligni-center" v-if="VipBuyShow">
        <div class="c-fs20 fc-vip-up">{{vip1.price}}元开通vip，{{vipDiscount == 0 ? ckFromText : '享受' + Number(vipDiscount / 10).toFixed(1) + '折优惠'}}</div>
        <div class="c-fs20 fc-vip-up c-flex-row c-aligni-center">立即开通<span class="iconfont c-fs20 c-ml10">&#xe60e;</span></div>
      </div>
      <div @click="goVipBuy(svip1.cmpId, cfrom.svip)" :style="'background:linear-gradient(90deg,rgba(247,223,176,1) 0%, rgba(247,223,176,0.7) 100%);'" class="c-hh60 c-ph24 c-flex-row c-justify-sb c-aligni-center" v-if="svipBuyShow&&!VipBuyShow">
        <div class="c-fs20 fc-vip-up">{{svip1.price}}元开通svip，{{svipDiscount == 0 ? ckFromText : '享受' + Number(svipDiscount / 10).toFixed(1) + '折优惠'}}</div>
        <div class="c-fs20 fc-vip-up c-flex-row c-aligni-center">立即开通 <span class="iconfont c-fs20 c-ml10">&#xe60e;</span></div>
      </div>
    </div>
    <!-- 绑定样式判断需要列举会展示的情况 -->
    <div class="c-pb24 c-ph24" v-else-if="isNew && (VipBuyShow || svipBuyShow) && styleType == 1">
      <!-- 详情页样式一 -->
      <div @click="goVipBuy(vip1.cmpId, cfrom.vip)" class="c-hh64 c-ph24 c-flex-row c-aligni-center vip-free-bg" v-if="VipBuyShow">
        <div class="c-fs24 vip-text c-flex-grow1">开通vip{{vipDiscount == 0 ? ckFromText : vipDiscountType == 2 ? '享受会员优惠价' : '享受' + Number(vipDiscount / 10).toFixed(1) + '折优惠'}}</div>
        <div class="c-fs22 c-textAlign-c vip-btn-bg c-ww144 c-hh40 c-lh42 c-br30">立即开通</div>
      </div>
      <div @click="goVipBuy(svip1.cmpId, cfrom.svip)" class="c-hh64 c-ph24 c-flex-row c-aligni-center svip-free-bg" v-if="svipBuyShow&&!VipBuyShow">
        <div class="c-fs24 svip-text c-flex-grow1">开通svip{{svipDiscount == 0 ? ckFromText : vipDiscountType == 2 ? '享受会员优惠价' : '享受' + Number(svipDiscount / 10).toFixed(1) + '折优惠'}}</div>
        <div class="c-fs22 c-textAlign-c svip-btn-bg c-ww144 c-hh40 c-lh42 c-br30">立即开通</div>
      </div>
    </div>
    <div v-else-if="styleType == 2" class="">
      <!-- 详情页样式二 -->
      <div @click="goVipBuy(vip1.cmpId, cfrom.vip)" class="c-hh52 c-ph20 c-flex-row c-aligni-center vip-free-style2 c-br10" v-if="VipBuyShow">
        <div class="c-flex-row c-aligni-center c-w0 c-flex-grow1">
          <img class="c-ww26 c-hh22" :src="$addXossFilter(require('@/assets/i/wap/course/member_icon.png'))" alt="">
          <div class="c-fs20 c-ml10" v-if="vipDiscount == 0">开通vip{{ckFromText}}</div>
          <div class="c-fs20 c-ml10" v-else-if="vipDiscountType == 2">开通vip享受会员优惠价</div>
          <div class="c-fs20 c-ml10" v-else><span>开通vip享受</span><span class="c-fs24 c-fc-xmlred">{{Number(vipDiscount / 10).toFixed(1)}}</span><span>折优惠</span></div>
        </div>
        <div class="c-fs20"><span>去开通</span><span class="iconfont c-fs16 c-ml10">&#xe60e;</span></div>
      </div>
      <div @click="goVipBuy(svip1.cmpId, cfrom.svip)" class="c-hh52 c-ph20 c-flex-row c-aligni-center vip-free-style2 c-br10" v-if="svipBuyShow&&!VipBuyShow">
        <div class="c-flex-row c-aligni-center c-w0 c-flex-grow1">
          <img class="c-ww26 c-hh22" :src="$addXossFilter(require('@/assets/i/wap/course/member_icon.png'))" alt="">
          <div class="c-fs20 c-ml10" v-if="svipDiscount == 0">开通svip{{ckFromText}}</div>
          <div class="c-fs20 c-ml10" v-else-if="vipDiscountType == 2">开通svip享受会员优惠价</div>
          <div class="c-fs20 c-ml10" v-else><span>开通svip享受</span><span class="c-fs24 c-fc-xmlred">{{Number(svipDiscount / 10).toFixed(1)}}</span><span>折优惠</span></div>
        </div>
        <div class="c-fs20"><span>去开通</span><span class="iconfont c-fs16 c-ml10">&#xe60e;</span></div>
      </div>
    </div>
  </div>
  <div v-else-if="showEntryInOptimal && !$isStore()" :class="customClass">
    <div class="c-br10 new-bg fc-D48E52">
      <div @click="goVipBuy(vip1.cmpId, cfrom.vip)" class="c-ph20" v-if="isShowVipEntry">
        <div class="c-flex-row c-justify-sb c-pv10" :class="isShowSvipEntry ? 'bd1-b' : ''">
          <div class="c-w0 c-flex-grow1 c-flex-row">
            <img class="c-ww84 c-hh32 c-mr18" :src="$addXossFilter(require('@/assets/i/wap/optimalPrice/vip1.png'))" alt="">
            <div class="c-fs20 c-wb-ba c-lh32">
              开通VIP会员, {{(vipDiscountType == 1 && vipDiscount == 0) || (vipDiscountType == 2 && vipDiscountPrice == 0) ? ckFromText : (vipDiscountType == 2 ? '立减' : '即享')}}
              <template v-if="!((vipDiscountType == 1 && vipDiscount == 0) || (vipDiscountType == 2 && vipDiscountPrice == 0))">
                <span class="c-fc-xmlred c-fs24">{{vipDiscountType == 2 ? Number(originPrice - vipDiscountPrice).toFixed(2) : Number(vipDiscount / 10).toFixed(1)}}</span>
                <span>{{vipDiscountType == 2 ? ' 元' : ' 折'}}, 预计</span><span class="c-fc-xmlred c-fs24">{{'￥' | iosPriceFilter}}{{(vipDiscountType == 2 ? vipDiscountPrice :  Number(originPrice) * Number(vipDiscount / 100)).toFixed(2)}}</span>
              </template>
            </div>
          </div>
          <div class="c-pl12 iconfont c-fs18 c-lh32 c-hh32">&#xe60e;</div>
        </div>
      </div>
      <div @click="goVipBuy(svip1.cmpId, cfrom.svip)" class="c-ph20" v-if="isShowSvipEntry">
        <div class="c-flex-row c-aligni-center c-justify-sb c-pv10">
          <div class="c-w0 c-flex-grow1 c-flex-row">
            <img class="c-ww84 c-hh32 c-mr18" :src="$addXossFilter(require('@/assets/i/wap/optimalPrice/svip1.png'))" alt="">
            <div class="c-fs20 c-wb-ba c-lh32">
              开通SVIP会员, {{(vipDiscountType == 1 && svipDiscount == 0) || (vipDiscountType == 2 && svipDiscountPrice == 0) ? ckFromText : (vipDiscountType == 2 ? '立减' : '即享')}}
              <template v-if="!((vipDiscountType == 1 && svipDiscount == 0) || (vipDiscountType == 2 && svipDiscountPrice == 0))">
                <span class="c-fc-xmlred c-fs24">{{vipDiscountType == 2 ? Number(originPrice - svipDiscountPrice).toFixed(2) : Number(svipDiscount / 10).toFixed(1)}}</span>
                <span>{{vipDiscountType == 2 ? ' 元' : ' 折'}}, 预计</span><span class="c-fc-xmlred c-fs24">{{'￥' | iosPriceFilter}}{{(vipDiscountType == 2 ? svipDiscountPrice :  Number(originPrice) * Number(svipDiscount / 100)).toFixed(2)}}</span>
              </template>
            </div>
          </div>
          <div class="c-pl12 iconfont c-fs18 c-lh32 c-hh32">&#xe60e;</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'VipEntry',
  props: {
    vipDiscount: {
      type: Number,
      default: 100
    },
    svipDiscount: {
      type: Number,
      default: 100
    },
    vipType: { //用户身份
      type: Number,
      default: 1
    },
    vip1: {
      type: Object,
      default: function () {
        return null
      }
    },
    svip1: {
      type: Object,
      default: function () {
        return null
      }
    },
    eduflag: {
      type: Boolean,
      default: false,
    },
    isNew: {
      type: Boolean,
      default: false,
    },
    ckFromText: {
      type: String,
      default: '本课程免费学习'
    },
    vipDiscountType: {
      type: Number,
      default: 1,
    },
    isPayPage: { //支付页会员免费时才展示
      type: Boolean,
      default: false,
    },
    originPrice: {
      type: Number,
      default: 0
    },
    vipDiscountPrice: {
      type: Number,
      default: 0,
    },
    svipDiscountPrice: {
      type: Number,
      default: 0,
    },
    styleType: {
      type: Number,
      default: 1,
    },
    dataInfo: {
      type: Object,
      default: () => {
        return null
      }
    },
    customClass: { // 自定义样式
      type: String,
      default: '',
    }
  },
  data() {
    return {
      cfrom: global.ckFrom,
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
    }
  },
  computed: {
    // 判断在有当前身份最低价格得情况下 是否还要展示vip\svip升级入口 营销目前不展示升级入口
    showEntryInOptimal() {
      return this.optimal && ![4, 101, 102, 112].includes(this.optimal.optimalPriceType) && (this.isShowVipEntry || this.isShowSvipEntry) && !this.isMarketing;
    },
    //是否是营销活动
    isMarketing() {
      if (this.dataInfo && this.dataInfo.prodType == this.cfrom.shopping) {
        return this.dataInfo.isMarket
      }
      let sales = this.dataInfo && this.dataInfo.prodType == this.cfrom.datum ? this.dataInfo.flashSales : (this.dataInfo && this.dataInfo.sales ? this.dataInfo.sales : null);
      let isMarketing = this.dataInfo &&
        (sales ||
        (this.dataInfo.bargain && ((this.dataInfo.bargain.status == 1 && this.dataInfo.bargain.isPreheat == 1) || this.dataInfo.bargain.status == 2)) ||
        (this.dataInfo.collage && (this.dataInfo.collage.status == 2 || this.dataInfo.collage.status == 1)) ||
        this.dataInfo.isFriendHelper)
      return isMarketing
    },
    // 判断是否有vip/svip价格
    hasVipDiscount() {
      return ((this.vipDiscountType == 2 &&
                ((Number(this.vipDiscountPrice) < Number(this.price) && this.vip1 && Number(this.vipType) < 2) ||
                (Number(this.svipDiscountPrice) < Number(this.price) && this.svip1 && this.companyAuth.enableSvipModule == 1 && this.companyAuth.enableSvipSpec && Number(this.vipType) < 3)))
            || (this.vipDiscountType == 1 &&
                ((this.vipDiscount != 100 && this.vip1 && Number(this.vipType) < 2) ||
                (this.svipDiscount != 100 && this.svip1 && this.companyAuth.enableSvipModule == 1 && this.companyAuth.enableSvipSpec && Number(this.vipType) < 3)))) && !this.isMarketing
    },
    // 新价格模式下最低价格对象
    optimal() {
      // optimalPriceType：1 产品本身价格 2 vip价格 3 svip价格 4 服务商 101 限时购 102 拼团 112 砍价  10 链动会员 20 链动代理商 99 链动复购
      return this.dataInfo && this.dataInfo.optimal ? this.dataInfo.optimal : null;
    },
    // 新价格展示模式下是否展示开通vip入口
    isShowVipEntry() {
      return this.vipType == 1 && (this.optimal.optimalPrice * 1 > this.vipPrice * 1) && ((this.vipDiscount < 100 && this.vip1 && this.vipDiscountType == 1) || (this.vipDiscountPrice < this.originPrice && this.vip1 && this.vipDiscountType == 2))
    },
    // 新价格展示模式下是否展示开通svip入口
    isShowSvipEntry() {
      return this.vipType < 4 && this.vipType != 3 && this.companyAuth.enableSvipModule == 1 && this.companyAuth.enableSvipSpec && (this.optimal.optimalPrice * 1 > this.svipPrice * 1) && ((this.svipDiscount < 100 && this.svip1 && this.vipDiscountType == 1) || (this.svipDiscountPrice < this.originPrice && this.svip1 && this.vipDiscountType == 2))
    },
    // vip价格
    vipPrice() {
      return (this.vipDiscountType == 2 ? Number(this.vipDiscountPrice) : Number(this.originPrice) * Number(this.vipDiscount / 100)).toFixed(2);
    },
    // svip价格
    svipPrice() {
      return (this.vipDiscountType == 2 ? Number(this.svipDiscountPrice) : Number(this.originPrice) * Number(this.svipDiscount / 100)).toFixed(2);
    },
    // 非会员身份展示升级vip，且svip不是免费的
    VipBuyShow() {
      let VipBuyShow = (this.vipDiscount == 0 && this.vip1 && (this.vipType < 2 || this.eduflag)) ||
      (this.vipDiscount < 100 && this.vip1 && this.vipType < 2 && this.vipDiscountType == 1 && !(this.vipDiscount != 0 && this.svipDiscount == 0 && this.svip1)) ||
      (this.vipDiscountPrice < this.originPrice && this.vip1 && this.vipType < 2 && this.vipDiscountType == 2 && !(this.vipDiscountPrice != 0 && this.svipDiscountPrice == 0 && this.svip1))
      return VipBuyShow
    },
    // 会员身份下 展示svip升级入口
    svipBuyShow() {
      let svipBuyShow = (this.svipDiscount == 0 && this.svip1 && (this.vipType < 4 || this.eduflag)) ||
      (this.svipDiscount < 100 && this.svip1 && this.vipType < 2 && this.vipDiscountType == 1) || (this.svipDiscountPrice < this.originPrice && this.svip1 && this.vipType < 2 && this.vipDiscountType == 2)
      return svipBuyShow
    },
  },
  watch: {
    dataInfo: {
      handler(newVal) {
        const dataInfo = JSON.parse(JSON.stringify(newVal));
        if (dataInfo) {
          this.vipDiscount = Number(dataInfo.vipDiscount);
          this.svipDiscount = Number(dataInfo.svipDiscount);
          this.vipDiscountPrice = dataInfo.prodType == this.cfrom.shopping ? Number(dataInfo.vipDiscount) : Number(dataInfo.vipDiscountPrice);
          this.svipDiscountPrice = dataInfo.prodType == this.cfrom.shopping ? Number(dataInfo.svipDiscount) : Number(dataInfo.svipDiscountPrice);
          this.originPrice = Number(dataInfo.price);
          this.vipType = !!dataInfo.vipType ? dataInfo.vipType : Number(localStorage.getItem("vipType" + localStorage.getItem("userId")))
          this.vipDiscountType = dataInfo.vipDiscountType ? Number(dataInfo.vipDiscountType) : 1;
        }
      },
      immediate: true,
    },
  },
  methods: {
    goVipBuy(cmpId, type) {
      let queryT = { 'prodId': cmpId, 'type': type };
      if (this.isPayPage) {
        queryT.fromCoursePay = 1;
      }
      this.$routerGo(this, this.isPayPage && ((this.VipBuyShow && this.vipDiscount == 0) || (!this.VipBuyShow && this.svipBuyShow && this.svipDiscount == 0)) ? "replace" : "push", {
        path: "/member/vip/vipUp",
        query: queryT
      });
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.vip1 = this.vip1 || (localStorage.getItem("vipArr1") ? JSON.parse(localStorage.getItem("vipArr1")) : null);
      this.svip1 = this.svip1 || (localStorage.getItem("svipArr1") ? JSON.parse(localStorage.getItem("svipArr1")) : null);
    })
  }
}
</script>
<style scoped>
.fc-vip-up {
  color: #6E442D;
}
.vip-free-bg {
  background: url("../../../assets/i/wap/course/vip_free_bg_new.png") no-repeat;
  background-size: 100% 100%;
}
.svip-free-bg {
  background: url("../../../assets/i/wap/course/svip_free_bg_new.png") no-repeat;
  background-size: 100% 100%;
}
.vip-free-style2 {
  color: #C25900;
  background-image: linear-gradient(270deg, #FFEEC0 0%, #FFF5D8 100%);
}
.vip-text {
  color: #eadbac;
  margin-left: 1.3rem;
}
.svip-text {
  color: #ffe6d5;
  margin-left: 1.3rem;
}
.vip-btn-bg {
  color: #333340;
  font-weight: 400;
  background: linear-gradient(270deg,#ffebb3, #e6c186);
}
.svip-btn-bg {
  color: #333340;
  font-weight: 400;
  background: linear-gradient(270deg,#ffefe3, #eac1a8);
}
.new-bg {
  background-image: linear-gradient(270deg, rgba(255, 238, 192, .5), rgba(255, 245, 216, .5));
}
.fc-D48E52 {
  color: #D48E52;
}
.bd1-b {
  border-bottom: 1px solid rgba(212, 142, 82, 0.2);
}
</style>


